<template>
  <div class="singleRing" ref="singleRing">
    <div class="chart" ref="chart"></div>
    <span class="singleRing-title">{{title}}</span>
  </div>
</template>

<script>
import echarts from 'echarts'
import * as echartsOption from './../../utils/echarts-option'
export default {
  name: 'singleRing',
  props: {
    // 头部信息
    title: {
      type: [String],
      default: ''
    },
    // 角度
    singleData: {
      type: [String, Number],
      default: 0
    },
    // 开始角度
    startAngle: {
      type: Number,
      default: -90
    },
    // 半径大小 如'50%'
    radius: {
      type: Array
    },
    // 填充区颜色
    borderColor: {
      type: [Object, String]
    },
    colorIndex: {
      type: Number,
      default: 0
    },
    labelFontSize: {
      type: Number,
      default: window.screen.width >= 1920 ? 18 : 14
    },
    labelFontWeight: {
      type: [Number, String],
      default: 'bold'
    }
  },
  components: {
  },
  data () {
    return {
      chart: ''
    }
  },
  methods: {
    initChart () {
      if (this.chart.isDisposed) {
        this.chart.dispose()
      }
      this.chart = echarts.init(this.$refs.chart)
      let configData = {
        data: this.singleData,
        radius: this.radius,
        color: this.borderColor,
        colorIndex: this.colorIndex,
        labelFontSize: this.labelFontSize,
        labelFontWeight: this.labelFontWeight
      }
      let chartOption = echartsOption.singleRing(configData)
      this.chart.setOption(chartOption)
    },
    resize () {
      this.chart.resize()
    }
  },
  mounted () {
    // this.initChart()
  },
  watch: {
    singleData (val) {
      this.initChart()
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  .singleRing{
    width: 100%;
    height: 100%;
    position: inherit;
    .singleRing-title{
      color: #A0B1D7;
      width: 100%;
      height: 20px;
      font-size: 12px;
    }
    .chart{
      width: 100%;
      height: calc(100% - 20px);
    }
  }
</style>
